<template>
  <div class="quanxian-content">
    <template>
      <el-card>
        <el-input placeholder="根据用户名搜索" style="width:20%" />
        <el-button style="margin:0 20px">清空</el-button>
        <el-button type="primary">搜索</el-button>
        <el-button type="success" style="float:right" icon="el-icon-edit" @click="addLimit">新增权限组</el-button>
        <el-alert
          :title="`共条记录`"
          type="info"
          show-icon
          :closable="false"
          style="margin:20px 0"
        />
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          :default-sort="{prop: 'date', order: 'descending'}"
          @selection-change="handleSelectionChange"
        >

          <el-table-column
            type="selection"
            width="100"
          />
          <el-table-column
            prop="title"
            label="用户名"
            width="300"
          />
          <el-table-column
            prop="create_date"
            label="日期"
            sortable
            width="120"
          >
            <template slot-scope="scope">{{ scope.row.create_date }}</template>
          </el-table-column>

          <el-table-column
            label="操作"
            fixed="right"
            width="400px"
            align="center"
          >
            <template slot-scope="scope">
              <div class="button">
                <el-button type="primary" plain icon="el-icon-edit" circle @click="set(scope.row)" />
                <el-button type="danger" plain icon="el-icon-delete" circle @click="remove(scope.row)" />
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <!-- 编辑弹窗 -->
      <el-dialog
        title="编辑权限组"
        :visible.sync="editdialog"
        width="60%"
        :before-close="handleClose"
      >
        <el-form :model="limitsData" label-width="100px">
          <el-form-item label="用户名">
            <el-input v-model="limitsData.title" />
          </el-form-item>
          <!-- 权限分配 -->
        </el-form>
        <div class="tree">
          <span>权限分配</span>
          <div class="limitTree">
            <el-tree
              ref="tree"
              :data="treeList"
              show-checkbox
              node-key="id"
              :default-expanded-keys="limitsData.permissions "
              :default-checked-keys="limitsData.permissions "
              :props="defaultProps"
            />
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editdialog = false">取 消</el-button>
          <el-button type="primary" @click="limitEdit">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 新增弹框 -->
      <el-dialog
        title="新增权限组"
        :visible.sync="AddDialog"
        width="60%"
        :before-close="handleClose"
      >
        <el-form :model="limitsData" label-width="100px">
          <el-form-item label="用户名">
            <el-input v-model="limitsData.title" />
          </el-form-item>
          <!-- 权限分配 -->
        </el-form>
        <div class="tree">
          <span>权限分配</span>
          <div class="limitTree">
            <el-tree
              ref="tree"
              :data="treeList"
              show-checkbox
              node-key="id"
              :default-expanded-keys="limitsData.permissions "
              :default-checked-keys="limitsData.permissions "
              :props="defaultProps"
            />
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="AddDialog = false">取 消</el-button>
          <el-button type="primary" @click="limitAdd">确 定</el-button>
        </span>
      </el-dialog>
    </template>
  </div>
</template>

<script>
import { limitListAPI, delLimitAPI, limitDetail, limitEditAPI, limitAddAPI } from '@/api/quanxian'
import { menusListAPI } from '@/api/menus'
import { pointsToChilds } from '@/utils/utils'
export default {
  name: 'Quanxian',
  data() {
    return {
      defaultProps: {
        // 数组类型的对象
        children: 'Childs',
        // 显示的内容
        label: 'title'
      },
      // 控制编辑弹框
      editdialog: false,
      AddDialog: false,
      query: {
        page: '1',
        pagesize: '10',
        keyword: ''

      },
      multipleSelection: [],
      // 权限组列表数据
      tableData: [],
      //
      limitsData: {
        title: ''
      },
      treeList: []
    }
  },
  async created() {
    this.limitList()
    this.getmenuTree()
    this.treeList = pointsToChilds(await menusListAPI())
  },
  methods: {
    // 新增权限组
    async limitAdd() {
      try {
        const checkedKeys = this.$refs.tree.getCheckedKeys()
        await limitAddAPI(this.limitsData.id, checkedKeys)
        this.limitList()
        this.AddDialog = false
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    // 新增权限组弹框
    addLimit() {
      this.AddDialog = true
    },
    // 获取树形数据
    async getmenuTree() {
      const res = await menusListAPI()
      this.treeList = pointsToChilds(res)
    },
    // 弹框关闭
    handleClose() {
      this.editdialog = false
    },
    // 获取权限组列表
    async limitList() {
      const resp = await limitListAPI(1, 10)
      console.log(resp)
      this.tableData = resp.list
    },
    // 编辑回显信息
    async  set(row) {
      try {
        this.limitsData = await limitDetail(row.id)
        this.editdialog = true
      } catch (error) {
        this.$message.error(error)
      }
    },
    // 编辑修改提交
    async limitEdit() {
      try {
        // 修改
        const checkedKeys = this.$refs.tree.getCheckedKeys()
        console.log(checkedKeys)
        await limitEditAPI(this.limitsData.id, this.limitsData.title, checkedKeys)
        this.limitList()
        this.editdialog = false
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    // 删除权限组列表
    async remove(row) {
      await delLimitAPI(row.id)
      this.limitList()
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    }
  }
}

</script>

<style>

</style>
